<template>
  <div id="xingneng">
    <div class="whitebox" data-aos="fade-up">
      <img id="xnitem" class="item" src="@/assets/images/xnitem.png" alt />
      <img class="huanrao" src="@/assets/images/xnhr.png" />
    </div>

    <div class="content col-center">
      <div class="title" data-aos="fade-up">冷静运行，静享酷爽</div>
      <div
        class="zh"
        data-aos="fade-up"
      >人人云采用最新设计，可有效提升风扇转速，风量较普通风扇提升，同时，风扇中置分离CPU，转速更快，风扇更大，散热更高效，运行环境仅为-5℃至35℃。 软件方面，搭载智能技术，以及风扇智能联动，室内噪音仅41分贝</div>
      <div
        class="eng"
        data-aos="fade-up"
      >Renren Cloud adopts the latest design, which can effectively improve the fan speed, the air volume is higher than the ordinary fan, at the same time, the CPU is separated in the fan, the speed is faster, the fan is bigger, the heat dissipation is more efficient. In terms of software, equipped with intelligent technology and intelligent linkage of fans, office video and audio scenes can effectively reduce noise compared with traditional fans</div>
    </div>

    <div class="blackbox" data-aos="fade-up">
      <img src="@/assets/images/main.png" alt />
      <img class="abs top" src="@/assets/images/top.png" alt />
      <img class="abs left" src="@/assets/images/left.png" alt />
      <img class="abs right" src="@/assets/images/right.png" alt />
      <img class="abs bottom" src="@/assets/images/bottom.png" alt />
    </div>

    <div class="content col-center">
      <div class="title">超强配置，极速响应</div>
      <div
        class="zh"
        data-aos="fade-up"
      >超级容量证明的EPOC机制，搭载i5处理器1T内存采用分布式碎片化储存技术，双核心-22纳米芯片，空间加密，多重备份别内存不足的焦虑。额定总算力为1TH/S(－5%～＋10%) 功耗为30W/h（＋0%～＋20%）生态挖矿更高效，多任务切换更流畅，使用更安心。</div>
      <div
        class="eng"
        data-aos="fade-up"
      >The EPOC mechanism of super capacity proof, equipped with i5 processor and 1T memory, adopts distributed fragmentation storage technology, dual core -22 nanometer chip, spatial encryption, multiple backup and anxiety of insufficient memory. Rated final strength: 1TH/S(-5% ~ +10%) The power consumption is 30W/h (+0% ~ +20%), the ecological mining is more efficient, the multi-task switching is smoother, and the use is more secure.</div>
    </div>

    <div class="tips">
      <div class="tip" v-for="i in list" :key="i.id">
        <img :src="i.icon" alt class="icon" />
        <div class="zh">{{i.text}}</div>
      </div>
    </div>

    <div class="touming">
      <div class="wrapper">
        <img class="tm" src="@/assets/images/tm.png" alt />
        <img id="gaizi" :style="{ opacity: opc }" class="gaizi" src="@/assets/images/gai.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      opc: 1,
      list: [
        {
          id: 0,
          icon: require("@/assets/images/31.png"),
          text: "极速挖矿",
          eng: "Cold technology"
        },
        {
          id: 1,
          icon: require("@/assets/images/32.png"),
          text: "万物可挖",
          eng: "Mute the cooling"
        },
        {
          id: 2,
          icon: require("@/assets/images/33.png"),
          text: "静音散热",
          eng: "Humanized design"
        },
        {
          id: 3,
          icon: require("@/assets/images/34.png"),
          text: "超低能耗",
          eng: "Ultra-low power consumption"
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      $(window).on("scroll", () => {
        let otop = $("#gaizi").offset().top - $(window).scrollTop();
        let wheight = $(window).height();
        this.opc = (otop / wheight).toFixed(2);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#xingneng {
  background-image: url("../assets/images/xnbg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: 20%;
  margin-bottom: 20%;
  padding-top: 40%;
  padding-bottom: 10%;
  position: relative;
}
@keyframes btm-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes upto {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  75% {
    transform: translateY(-100%);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 1;
  }
}
@keyframes leftto {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  75%,
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes rightto {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
.blackbox {
  width: 106px;
  margin: 80px auto;
  position: relative;
  .abs {
    position: absolute;
  }
  .top {
    left: 0;
    top: 0;
    animation: upto 2s linear infinite;
  }
  .left {
    top: 40px;
    left: -80px;
    animation: leftto 2s linear infinite;
  }
  .right {
    top: 40px;
    right: -80px;
    animation: rightto 2s linear infinite;
  }
  .bottom {
    left: 11px;
    bottom: 0;
    animation: btm-rotate 0.2s linear infinite;
  }
}
@keyframes huanrao {
  0% {
    transform: translate(-50%, -100%);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -220%);
    opacity: 0;
  }
}
.whitebox {
  position: relative;
  .item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -120%);
    margin-left: 17px;
  }
  .huanrao {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -120%);
    animation: huanrao 3s linear infinite;
  }
}
.content {
  .title {
    width: 155px;
    height: 21px;
    font-size: 16px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 21px;
    letter-spacing: 1px;
  }
  .zh {
    margin-top: 16px;
    text-indent: 2em;
    width: 316px;
    font-size: 11px;
    font-family: MicrosoftYaHei;
    color: rgba(255, 255, 255, 1);
    line-height: 17px;
  }
  .eng {
    margin: 16px 0;
    text-indent: 2em;
    width: 316px;
    font-size: 11px;
    font-family: MicrosoftYaHei;
    color: rgba(153, 153, 153, 1);
    line-height: 17px;
  }
}
.tips {
  display: flex;
  width: 80%;
  justify-content: space-around;
  margin: 10% auto;
}
.tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon {
    width: 17px;
    height: 17px;
  }
  .zh {
    margin-top: 10px;
    width: 52px;
    height: 16px;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: rgba(255, 255, 255, 1);
    line-height: 16px;
  }
}
.touming {
  position: absolute;
  bottom: 0;
  left: 50%;
  .wrapper {
    margin: 0 auto;
    position: relative;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .tm {
      z-index: 8;
    }
    .gaizi {
      z-index: 9;
      margin-top: -21px;
    }
  }
}
@media screen and (max-width: 360px) {
  .content {
    .zh {
      width: 300px;
      font-size: 8px;
    }
    .eng {
      width: 300px;
      font-size: 8px;
    }
  }
  .whitebox {
    .huanrao {
      display: none;
    }
  }
}
</style>